<template>
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>新增产品分类</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item
        label="父分类"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="parentId"
      >
        <a-tree-select
          v-model="form.parentId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="categoryOptions"
          placeholder="请选择"
          :replaceFields="{children:'children', title:'categoryName', key:'categoryId', value: 'categoryId' }"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item
        label="分类名称"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryName"
      >
        <a-input placeholder="请填写分类名称" v-model="form.categoryName" />
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        has-feedback
        :labelCol="{span: 5}"
        :wrapperCol="{span: 15}"
        prop="categoryStatus"
      >
        <a-select placeholder="请选择状态：" style="width: 100%" allow-clear v-model="form.categoryStatus">
          <a-select-option v-for="(d, index) in categoryStatusOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import { getCategory, saveCategory, updateCategory } from '@/api/wms/base/category'

export default {
  components: {},
  props: {
    categoryStatusOptions: {
      type: Array,
      required: true
    },
    categoryOptions: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      open: false,
      form: {
        categoryName: undefined,
        parentId: undefined,
        categoryStatus: undefined
      },
      rules: {
        categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
        parentId: [{ required: true, message: '父分类id不能为空', trigger: 'blur' }],
        categoryStatus: [{ required: true, message: '状态：1.启用，0.禁用不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    rest () {
      this.form = {
        categoryName: undefined,
        parentId: undefined,
        categoryStatus: '1',
        categoryLevel: undefined
      }
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 新增
    handleAdd (row) {
      this.rest()
      this.open = true
      this.form.parentId = row.categoryId
      this.form.categoryLevel = row.categoryLevel + 1
    },
    showForm (id) {
      this.open = true
      if (id) {
        getCategory(id).then(res => {
          if (res.code === 200) {
            this.form = res.data
          }
        })
      }
    },
    onClose () {
      this.open = false
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.categoryId) {
            updateCategory(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '修改成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          } else {
            saveCategory(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success(
                  '添加成功',
                  3
                )
                this.open = false
                this.$emit('ok')
              }
            })
          }
        }
      })
    }
  },
  created () {

  },
  mounted () {
  }
}
</script>,
